<template>
    <div class="main">
        <el-card style="max-width: 480px">
            <template #header>
                <div class="card-header">
                    <span>黎明体检报告管理系统-医生登录</span>
                </div>
            </template>
            <p class="text item">
                <el-form :model="doctor" label-width="auto" style="max-width: 600px">
                    <el-form-item label="请输入医生编码：">
                        <el-input v-model="doctor.docCode" />
                    </el-form-item>
                    <el-form-item label="请输入医生密码：">
                        <el-input v-model="doctor.password" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="login">登录</el-button>
                        <el-button @click="quxiao">取消</el-button>
                    </el-form-item>
                </el-form>
            </p>
            <template #footer>@Neusoft 2024年9月24日</template>
        </el-card>
    </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { setSessionStorage } from "@/common";

export default {
    // Compositional API approach
    setup() {
        const router = useRouter();
        const state = reactive({
            doctor: {
                docCode: '',
                password: ''
            },
        });

        function login() {

            if (state.doctor.docCode == '') {
                ElMessage({
                    message: '医生编码不能为空！',
                    type: 'warning',
                })
                return;
            }

            if (state.doctor.password == '') {
                ElMessage({
                    message: '密码不能为空！',
                    type: 'warning',
                })
                return;
            }

            //都不为空，那么代码继续往下走
            axios.post('/api/doctor/login', state.doctor).then((response) => { //response=[ApiRestResponse]
                console.log("登录信息：" + response.data.desc);
                let apires = response.data;//  u----ApiRestResponse
                console.log("登录状态：" + apires.status);
                //获取服务端返回的用户信息
                let doctors = apires.data;
                //console.log("服务端返回信息:" + doctors.docCode + ":" + doctors.password);

                if (apires.status == 200) {
                    //保存会话域
                    // sessionStorage.setItem('user',user);
                    setSessionStorage('doctors', doctors);
                    ElMessage({
                        message: '登录成功',
                        type: 'success',
                    })
                    router.push('/reportlist');

                } else {
                    ElMessage({
                        message: '医生编码或密码不正确！',
                        type: 'warning',
                    })

                    return;
                }

            }).catch((error) => {
                console.log(error);
            });
        }


        function quxiao() {
            location.reload();
        }


        return {
            ...toRefs(state),
            login,
            quxiao
        }
    }
}
</script>


<style scoped>
.el-card {
    width: 480px;
    margin: 0 auto;
    margin-top: 150px;
    background-color: rgba(255, 255, 255, 0.616);
}

.main {
    background-image: url('../assets/bg1.jpg');
    background-size: cover;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* .btm {
  
} */

.but {
    margin-left: 160px;

}
</style>